<template>
    <div class="layout-pd">
        <el-card class="center-container">
            <el-form :model="state.logisticalInfo" size="default" label-width="auto" style="max-width: 600px">
                <el-row :gutter="25">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物流商名称">
                            <el-input v-model="state.logisticalInfo.name" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="账期">
                            <el-input v-model="state.logisticalInfo.paymentTerm" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物流商编码">
                            <el-input v-model="state.logisticalInfo.code" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="手机号">
                            <el-input v-model="state.logisticalInfo.phoneNum" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="公司名称">
                            <el-input v-model="state.logisticalInfo.companyName" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="地址">
                            <el-input v-model="state.logisticalInfo.address" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" class="button-center">
                        <el-form-item>
                            <el-button type="primary" @click="saveLogistical">保存</el-button>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </el-card>

        <el-card>
            <el-tabs type="border-card">
                <el-tab-pane label="联系人">
                    <LogisticalContact :bizId="state.logisticalInfo.id" :type="2" />
                </el-tab-pane>
            </el-tabs>
        </el-card>

    </div>
</template>

<script setup lang="ts" name="productInstance">
import { reactive, ref, defineAsyncComponent, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useLogisticalApi } from '/@/api/mainData/logistical';

// 引入组件
const LogisticalContact = defineAsyncComponent(() => import('/@/views/mainData/contact/index.vue'));

// 定义
const state = reactive({
    logisticalInfo: {
        id: '',
        name: '',
        code: '',
        paymentTerm:0,
        phoneNum: '',
        companyName: '',
        address: '',
    },
});
const router = useRouter();
const logisticalApi = useLogisticalApi();

// 保存供应商信息
async function saveLogistical() {
    const result = await logisticalApi.editLogistical(state.logisticalInfo);
    if (undefined == route.query.id) {
        if (result.data == null) {
            return Promise.resolve(true);
        }
        const logisticalDetail: Logistical = result.data;
        const params: EmptyObjectType = { id: logisticalDetail.id };
        router.push({
            path: '/mainData/logistical/detail',
            query: params,
        });
    }
}

// 获取路由数据
const route = useRoute();

// 初始化供应商详情
async function initLogisticalDetail() {
    if (undefined == route.query.id) {
        return;
    }
    const param = {
        id: route.query.id,
    }
    const result = await logisticalApi.logisticalDetail(param);
    if (result.data == null) {
        return Promise.resolve(true);
    }
    const logisticalDetail: Logistical = result.data;
    state.logisticalInfo = logisticalDetail;
    state.logisticalInfo.id = logisticalDetail.id.toString();
}

// 页面加载时
onMounted(() => {
    initLogisticalDetail();
});
</script>

<style scoped>
.center-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    padding: 20px;
    /* 防止内容紧贴边缘 */
}

.button-center {
    display: flex;
    justify-content: center;
}
</style>
